<!-- 采购管理-采购任务列表 -->
<template>
  <pageHeader title="编辑采购申请" :breadCrumb="breadCrumb" :show-back="true">
    <!-- <template #buts>
      <a-button type="primary" @click="router.back()">
        <template #default>取消</template>
      </a-button>
    </template> -->
  </pageHeader>
  <div class="title">
    <h1>采购计划表</h1>
  </div>
  <div class="content">
    <div style="display: flex">
      <div class="form-item">
        <div class="title-item">
          <a-space style="margin-left: 40px">
            <div
              style="
                width: 5px;
                height: 23px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            ></div>
            <div>基本信息</div></a-space
          >
        </div>
        <div class="demand-index">
          <a-form
            ref="form"
            :model="demand.info"
            autoLabelWidth
            :layout="(layout as Tlayout)"
          >
            <a-row :gutter="16">
              <a-col
                v-for="item in demandForm?.info?.design?.form"
                :key="item.id"
                :span="item.span"
              >
                <FormItem
                  :name="item.name"
                  :componentType="item.componentType"
                  v-model:props="item.props"
                  :required="item.required"
                  v-model:values="item.values"
                  :disabled="true"
                />
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      <!-- <div class="approve-item">
        <h3 style="margin: 50px auto"> </h3>
      </div> -->
    </div>
    <div v-if="demand.info.state === 4 || demand.info.state === 6">
      <div>
        <!-- <TitleBox title="订单信息"></TitleBox> -->
        <div class="title-item">
          <a-space style="margin-left: 40px">
            <div
              style="
                width: 5px;
                height: 23px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            ></div>
            <div>订单信息</div></a-space
          >
        </div>
        <div class="order-info">
          <OrderResp
            :tableData="orderRespData"
            v-if="orderRespData"
          ></OrderResp>
        </div>
      </div>
    </div>
    <div>
      <div class="title-item">
        <a-space style="margin-left: 40px">
          <div
            style="
              width: 5px;
              height: 23px;
              background-color: rgba(61, 126, 255, 1);
              border: none;
              border-radius: 2px;
            "
          ></div>
          <div>审核结果</div></a-space
        >
      </div>
      <div style="width: 95%; margin: 20px 40px">
        <a-space :size="40" direction="vertical" fill>
          <div
            ><span>是否通过审核：</span>
            <a-radio-group v-model="demand.info.state" size="large" disabled>
              <a-radio
                :value="4"
                :style="{
                  marginRight: '20px',
                }"
              >
                <template #radio="{ checked }">
                  <div
                    :style="{
                      display: 'flex',
                      width: '135px',
                    }"
                    :class="checked ? 'checked-radio' : 'unchecked-radio'"
                  >
                    <div
                      :style="{
                        width: '35px',
                        textAlign: 'center',
                      }"
                      :class="
                        checked
                          ? 'radio-icon-box-checked'
                          : 'radio-icon-box-unchecked'
                      "
                    >
                      <icon-check-circle
                        :class="
                          checked
                            ? 'radio-icon-checked'
                            : 'radio-icon-unchecked'
                        "
                        class="radio-icon"
                        size="20px"
                      />
                    </div>
                    <div
                      :style="{
                        width: '100px',
                        textAlign: 'center',
                      }"
                    >
                      通过
                    </div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="5">
                <template #radio="{ checked }">
                  <div
                    :style="{
                      display: 'flex',
                      width: '135px',
                    }"
                    :class="checked ? 'checked-radio-no' : 'unchecked-radio'"
                  >
                    <div
                      :style="{
                        width: '35px',
                        textAlign: 'center',
                      }"
                      :class="
                        checked
                          ? 'radio-icon-box-checked-no'
                          : 'radio-icon-box-unchecked'
                      "
                    >
                      <icon-check-circle
                        :class="
                          checked
                            ? 'radio-icon-checked-no'
                            : 'radio-icon-unchecked'
                        "
                        class="radio-icon"
                        size="20px"
                      />
                    </div>
                    <div
                      :style="{
                        width: '100px',
                        textAlign: 'center',
                      }"
                    >
                      不通过
                    </div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group></div
          >
        </a-space>
      </div>
    </div>
  </div>

  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 审核信息 </template>
    <div
      ><a-form :model="demand" auto-label-width>
        <a-form-item field="priority" label="优先级" required>
          <a-radio-group v-model="demand.info.priority">
            <a-radio :value="4">紧急</a-radio>
            <a-radio :value="3">高</a-radio>
            <a-radio :value="2">中</a-radio>
            <a-radio :value="1">低</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form></div
    >
  </a-modal>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    computed,
    onMounted,
    defineAsyncComponent,
  } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import {
    getPurchasePlanDetail,
    putPlanPurchaseList,
  } from '@/api/buy-management/buy-plan/index';
  import { getOpenTemp } from '@/api/buy-management/get-template/index';

  let OrderResp = defineAsyncComponent(
    () => import('../components/order-resp/index.vue')
  );
  const getrefs = ref();
  const orderRespData = ref([]);
  const route = useRoute();
  const router = useRouter();
  const layout = ref('vertical');
  type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
  const breadCrumb: string[] = ['采购管理', '采购管理', '编辑采购计划'];
  interface DemandType {
    info: {
      number: string;
      name: string;
      applyByUser: number;
      applyByDept: number;
      phone: string;
      applyTime: string;
      deliveryTime: string;
      priority: number;
      state: number;
      cause: string;
      templateId: number;
      flowId: number;
      file_id: number;
      extend: string;
      product: any;
      file: any;
    };
  }
  const demand = reactive<DemandType>({
    info: {
      number: '',
      name: '',
      applyByUser: 0,
      applyByDept: 0,
      phone: '',
      applyTime: '',
      deliveryTime: '',
      priority: 0,
      state: 0,
      cause: '',
      templateId: 0,
      flowId: 0,
      file_id: 0,
      extend: '',
      product: [],
      file: [],
    },
  });
  interface DemandFormType {
    info: {
      id: number;
      flowId: number;
      design: {
        form: any[];
      };
    };
  }
  const demandForm = reactive<DemandFormType>({
    info: { id: 0, flowId: 0, design: { form: [] } },
  });

  const Process = ref();

  const getTemp = async () => {
    const res = await getPurchasePlanDetail({ id: route.query.id });
    orderRespData.value = res.orderResp ? res.orderResp : [];
    demand.info = res.planData;
    demandForm.info.design.form = res.planData.extends;
    demandForm.info.design.form.sort((a: any, b: any) => a.sort - b.sort);
    demandForm.info.design.form.forEach((item: any) => {
      if (item.values !== '') {
        if (item.values[0] === '') {
          item.values = [];
        }
      }
      if (item.code === 'FILE') {
        item.props.data = demand.info.file;
      }
      if (item.code === 'APPLY_DATE') {
        item.values = [demand.info.createdAt];
      }
      if (item.code === 'BUY-PLAN-DETAILS') {
        item.props.state = demand.info.state;
        item.props.data = demand.info.product;
        item.props.number = demand.info.number;
      }
    });
  };
  getTemp();
</script>

<style scoped lang="less">
  // .content-head {
  // }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content {
    width: 100%;
    padding: 20px;
  }
  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }
  .demand-index {
    padding: 25px 140px;
  }

  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 16px;
  }
  .checked-radio {
    background-color: rgb(49, 194, 124);
    color: #fff;
    border: 1px solid rgb(49, 194, 124);
    font-weight: 700;
    font-size: 16px;
  }

  .checked-radio-no {
    background-color: rgb(255, 0, 0);
    color: #fff;
    border: 1px solid rgb(255, 0, 0);
    font-weight: 700;
    font-size: 16px;
  }
  .radio-icon-box-checked {
    border: 1px solid rgb(49, 194, 124);
    background-color: #fff;
  }
  .radio-icon-box-checked-no {
    border: 1px solid rgb(255, 0, 0);
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: rgb(49, 194, 124);
  }

  .radio-icon-checked-no {
    color: rgb(255, 0, 0);
  }

  .radio-icon-unchecked {
  }
  .radio-icon {
    position: relative;
    top: 3px;
  }

  .approve-item {
    margin: 25px auto;
    width: 30%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
    height: 600px;
  }
  .form-item {
    width: 100%;
  }

  .order-info {
    width: 95%;
    margin: 20px auto;
  }
</style>
